<template>
  <mirror-text-area
    ref="mirrorRef"
    :mode="resourceModalPro.mode"
    :content="resourceModalPro.content"
  ></mirror-text-area>
</template>
<script setup lang="ts">
import { onMounted, defineComponent, ref, nextTick } from 'vue';
import mirrorTextArea from '@/components/SqlEditor2.vue';

const resourceModalPro: any = ref({ mode: 'sql', content: '' });
const mirrorRef: any = ref();
/**
 * 赋值方法, 取值方法, 根据具体场景调用
 * nextTick(() => {
 *    mirrorRef.value.setValue(resourceModalPro.value.content);
 *    mirrorRef.value.setMode(resourceModalPro.value.mode);
 *    console.info(mirrorRef.value.getValue());
 * });
 */
nextTick(() => {
  mirrorRef?.value?.setValue(resourceModalPro.value.content);
  mirrorRef?.value?.setMode(resourceModalPro.value.mode);
  console.info(mirrorRef?.value?.getValue());
});
</script>
<style>
.CodeMirror {
  width: 100%;
  height: 600px;
  font-size: 16px;
}
</style>
